<template>
  <div class="login">
    <van-form class="form" @submit="onSubmit">
      <div class="avatar">
        <img src="/assets/images/avatar.jpg" />
      </div>

      <van-field
        v-model="business.mobile"
        name="mobile"
        placeholder="手机号码"
        left-icon="phone-o"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' },
        ]"
      />

      <van-field
        v-model="business.password"
        type="password"
        name="password"
        placeholder="密码"
        left-icon="warn-o"
        required
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div class="button">
        <van-button
          round
          block
          color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
          native-type="submit"
        >
          注册登录</van-button
        >
      </div>

      <div class="forget">
        <router-link to="/">返回首页</router-link>
      </div>
    </van-form>
  </div>
</template>

<script setup>
// 获取类似于vue2的this对象
const { proxy } = getCurrentInstance();

// 定义手机号和密码
const business = ref({
  mobile: "",
  password: "",
});
// 获取地址栏
const token = ref(proxy.$route.query.token ?? "");

const onSubmit = async (values) => {
  // 如果有推广码
  if (token) {
    values.token = token.value;
  }
  // 发起请求
  let result = await proxy.$http.post({
    url: "/business/login",
    params: values,
  });
  // 处理请求结果
  if (result.code === 1) {
    proxy.$success({
      message: result.msg,
      onClose: () => {
        proxy.$business.value = result.data;
        // console.log(proxy.$business.value);
        let redirect = proxy.$cookies.get("redirect")
          ? proxy.$cookies.get("redirect")
          : "";
        // 跳转
        if (redirect) {
          // 登录成功后删除重定向记录
          proxy.$cookies.remove("redirect");
          proxy.$router.back();
        } else {
          proxy.$router.push({ path: result.url });
        }
      },
    });
  } else {
    proxy.$fail(result.msg);
  }
};
</script>

<style scoped>
@import url("/assets/css/login.css");
</style>
